<template>
    <div class="edit-container">
        <nut-popup :visible="props.visible" position="bottom" @update:visible="(val:boolean) => emits('update:visible', val)">
            <div class="header">属性编辑</div>
            <nut-form ref="formRef" :rules="rules" :model-value="state.form">
                <nut-form-item label="名称" prop="attrName">
                    <nut-input v-model="state.form.attrName" placeholder="请输入名称" type="text" />
                </nut-form-item>
                <nut-form-item label="类型" prop="inputType">
                    <nut-radio-group v-model="state.form.inputType" direction="horizontal">
                        <nut-radio :label="1">单选</nut-radio>
                        <nut-radio :label="2">复选</nut-radio>
                        <nut-radio :label="3">弹窗单选</nut-radio>
                    </nut-radio-group>
                </nut-form-item>
                <nut-form-item label="可选属性值" prop="values">
                    <nut-input v-for="(item, index) in state.form.values" class="value-input" :key="item" v-model="item.value" type="text" @blur="changeValue(index)" @keydown.enter="changeValue(index)" />
                    <nut-input v-model="state.form.standbyValue" class="value-input" type="text" placeholder="请输入值" @blur="addValue" @keydown.enter="addValue" />
                </nut-form-item>
            </nut-form>
            <div class="footer">
                <nut-button class="cancel" type="default" @click="emits('update:visible', false)">取消</nut-button>
                <nut-button class="save" type="info" @click="save">保存</nut-button>
            </div>
        </nut-popup>
        <Notify ref="notifyRef" />
    </div>
</template>

<script lang="ts">
export default { name: '' }
</script>

<script lang="ts" setup>
import { reactive, ref, nextTick, onMounted, useAttrs, useSlots } from 'vue'
import Notify from '@/components/system/Notify.vue'
import { Form } from '@nutui/nutui-taro'
import { $http } from '@/request'

const formRef = ref<InstanceType<typeof Form>>()
const notifyRef = ref<InstanceType<typeof Notify>>()
// const slots = useSlots()
// const attrs = useAttrs()
const emits = defineEmits<{
    'update:visible': [ value: boolean ],
    'refresh': []
}>()

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    }
})

const rules = {
    attrName: [
        { required: true, message: '请输入名称' }
    ],
    values: [
        { required: true, message: '请输入可选值', validator: (value: string) => !!value.length }
    ]
}

interface valueItem {
    value: string
}

const state = reactive({
    form: {
        attrName: '',
        inputType: 1,
        values: [] as valueItem[],
        standbyValue: ''
    }
})

const addValue = () => {
    // 不可为空
    if (!state.form.standbyValue) return true
    if (state.form.standbyValue.includes(',')) {
        notifyRef.value?.$error('不允许输入英文逗号')
        return false
    }
    if (state.form.values.some(item => item.value === state.form.standbyValue)) {
        notifyRef.value?.$error('属性值重复')
        return false
    }
    state.form.values.push({ value: state.form.standbyValue })
    state.form.standbyValue = ''
    return true
}

const changeValue = (index: number) => {
    if (!state.form.values[index].value) state.form.values.splice(index, 1)
}

const save = () => {
    if (!addValue()) return
    formRef.value?.validate().then(({ valid }) => {
        if (!valid) return
        $http.addAttr({
            ...state.form,
            standbyValue: undefined,
            values: state.form.values.map(item => item.value).join()
        }).then(r => {
            notifyRef.value?.$success('属性添加成功')
            emits('update:visible', false)
            emits('refresh')
        }).catch(e => {
            notifyRef.value?.$error(e.data?.message ?? '属性添加失败')
        })
    }).catch(e => { })
}
</script>
<style lang="scss" scoped>
.edit-container {
    .header {
        margin-top: 16px;
        text-align: center;
        color: gray;
    }
    .nut-form {
        .value-input {
            margin-bottom: 20px;
        }
    }
    .footer {
        display: flex;
        .nut-button {
            margin: 10px;
            &.cancel {
                flex: 3;
            }
            &.save {
                flex: 7;
            }
        }
    }
}
</style>